<template>
  <div class="app-online">
    <el-row>
      <el-col>
        <el-form :inline="true" :model="search" label-width="120px">
          <el-form-item :label="$t('keyword')">
            <el-input v-model="search.filter" :placeholder="$t('searchKeyword')" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="doSearch">{{ $t('search') }}</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div class="table-buttons">
      <el-button
        v-btnPermission:delete
        :disabled="DeleteDisabled"
        type="danger"
        icon="el-icon-delete"
        @click="switchHandle('del')"
      >{{ $t('forcedRetreat') }}</el-button>
    </div>
    <el-card class="box-card" shadow="never">
      <!-- 表单部分 -->
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
          :handle-selection-change="handleSelectionChange"
          :row-click="rowClick"
        />
      </el-row>
      <!--分页组件-->
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import crudJob from '@/api/monitor/online'
import Pagination from '@/components/Pagination'
import mySetting from '@/mixins/mySetting'
import { clearNull } from '@/utils/myTools'
export default {
  name: 'OnlineUser',
  components: { Pagination },
  mixins: [mySetting],
  data() {
    return {
      delLoading: false,
      multipleSelection: [],
      search: {},
      tableColumns: [
        { prop: '', label: '', type: 'selection' },
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        {
          prop: 'projectCode',
          label: this.$t('projectCode')
        },
        {
          prop: 'userId',
          label: this.$t('loginInfo')
        },
        {
          prop: 'userType',
          label: this.$t('userType'),
          templete: (_scope) => {
            return (
              <span>{ (_scope.row.userType === 0 ? this.$t('superAdminType') : (_scope.row.userType === 1 ? this.$t('projectAdminType') : this.$t('normalUserType'))) }</span>
            )
          }
        },
        {
          prop: 'ipAddress',
          label: this.$t('ipAddress')
        },
        {
          prop: 'loginTime',
          label: this.$t('loginTime')
        }
      ],
      tableLoading: true
    }
  },
  created() {
    this.initList()
  },
  methods: {
    switchHandle(val) {
      switch (val) {
        case 'del':
          this.handleDel()
          break
        default:
          break
      }
    },
    // 删除数据
    handleDel() {
      this.$confirm(
        this.$t('confirmRetreat') + this.multipleSelection.length + this.$t('recordCount'),
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        const ids = this.multipleSelection.map(ele => {
          return ele.key
        })
        crudJob.del({ keys: ids }).then(res => {
          this.doMerge(res)
          this.setOnePage()
          this.initList()
        })
      })
    },
    // 切换分页
    getList(val) {
      this.tableLoading = true
      this.listQuery = val
      this.initList()
    },
    // 初始化列表
    initList() {
      let obj = {
        ...this.listQuery,
        ...this.search
      }

      obj = clearNull(obj)
      crudJob.getList(obj).then(res => {
        this.tableData = res.data
        this.total = res.total
        this.tableLoading = false
      })
    },
    // 点击查询
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    // 确认新增
    doSave() {

    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
</style>
